<template>
   <div class="address-list-box">
       <cu-navbar>
           <block slot="content">收货地址</block>
       </cu-navbar>
       <view class="container">
        
           <!-- 收货地址列表 -->
           <view class="address-list">
               <!-- 循环展示收货地址 -->
               <view v-for="(address, index) in addressList" :key="index" class="address-item">
                   <view class="address-info">
                       <view class="username">{{ address.consignee }}</view>
                       <view class="phone">{{ address.mobile }}</view>
                   </view>
                   <view class="address-detail">{{ address.province }}{{ address.city }}{{ address.area }}{{ address.detailaddress }}</view>
                   <view class="default-address f-r a-c">
                       <u-switch v-model="address.isdefault" style="margin-right: 10px" @change="(val) => setDefaultAddress(address,val)"/>
                       <span>默认地址</span>
                   </view>
                   <span class="edit-icon" @click="editAddress(address)">编辑</span>
               </view>
           </view>
           <!-- 添加新地址按钮 -->
           <view class="submit" @click="addAddress">
               新增收货地址
           </view>
       </view>
   </div>
</template>

<script>
export default {
  data() {
    return {
      addressList: [
      
      ]
    }
  },
    onShow() {
        this.getList()
    
    },
  methods: {
    // 设置默认地址
    setDefaultAddress(item, value) {
        setTimeout(() => {
            this.$api
                .editaddress({
                    ...item,
                    isdefault: value ? 1 : 0,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.$common.successToShow("切换成功");
                        this.getList()
                    }
                });
        },0)
    },
      getList() {
          this.$api.address_list().then(res => {
              this.addressList = res.result.map(el => {
                  return {
                      ...el,
                      isdefault: !!el.isdefault
                  }
              })
          })
      },
    // 添加收货地址
    addAddress() {
      // 跳转到添加收货地址页面
      uni.navigateTo({
        url: '/pages/address/add'
      })
    },
    editAddress(item) {
        uni.navigateTo({
            url: '/pages/address/edit?id='+ item.address_id
        });
    }
  }
}
</script>

<style lang="scss">
.address-list-box{
  height: 100vh;
  .submit {
    position: fixed;
    left: 0;
    bottom: 20rpx;
    width: 100%;
    z-index: 9999;
  }
}
.container {
  padding: 20rpx;
  padding-bottom: 160rpx;
}

.address-list {
  margin-top: 10rpx;
}

.address-item {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 10rpx;
  box-shadow: 0rpx 2rpx 5rpx rgba(0, 0, 0, 0.15);
  position: relative;
}
.edit-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  color: ff0000;
}

.username {
  font-size: 28rpx;
  color: #333;
}

.phone {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.address-detail {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.default-address {
  font-size: 24rpx;
  color: #ff0000;
  margin-top: 20rpx;
}

.add-address-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  background-color: #fff;
  border-radius: 8rpx;
  margin-top: 20rpx;
  box-shadow: 0rpx 2rpx 5rpx rgba(0, 0, 0, 0.15);
}

.add-address-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 10rpx;
}
</style>
